<template>
  <div class="v-slider">
    <div class="block">
      <span class="demonstration lf">{{ msgText }}</span>
      <el-slider class="lf" v-model="val" @change="change"></el-slider>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      msgText: {
        type: String,
        default: '全量'
      },
      value: {
        type: Number,
        default: 100
      }
    },
    data () {
      return {
        val: ''
      }
    },
    methods: {
      change (value) {
        this.$emit('on-change', value)
      }
    },
    created () {
      this.val = this.value
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-slider
    .block
      overflow hidden
      .demonstration
        margin-right 15px
        position relative
        top 8px
      .el-slider
        width 90px
</style>
